import MyNavBar from '../../../components/navbar'
import { TextArea, Button, Toast } from 'antd-mobile'
import MsgLeft from './components/MsgLeft'
import MsgRight from './components/MsgRight'
import { useSocket } from '../../../hooks'
import styles from './css/chat.module.css'
import { useEffect, useRef, useState } from 'react'

function Chat() {
  // 所有的聊天消息（包含机器人的消息和我们的消息）
  const [list, setList] = useState([])
  const [userMsg, setUserMsg] = useState('')
  const domRef = useRef(null)

  // const 接收到的 socket 就是聊天的连接对象，
  // 通过 这个 socket 可以向服务器发送消息
  const socket = useSocket('wss://api-ticket.liulongbin.top', (msg) => {
    // 这里的箭头函数，是一个回调函数，
    // 在这个回调函数中,接收并处理服务器发送给我们的聊天消息
    setList((prev) => [
      ...prev,
      { type: 'AI', message: msg.replaceAll('{br}', '<br/>') }
    ])
  })

  // 点击按钮，发送消息
  const send = () => {
    if (userMsg.trim().length === 0) return Toast.show('聊天消息不能为空！')

    // 发送消息到服务器
    socket.current.emit('chatWithServer', userMsg)
    // 把消息存入 list 数组
    setList((prev) => [...prev, { type: 'User', message: userMsg }])
    // 清空文本框
    setTimeout(() => setUserMsg(''))
  }

  useEffect(() => {
    // 获取父容器中的最后一个子元素（最新的聊天消息的 DOM 元素）
    const dom = domRef.current.lastElementChild
    if (!dom) return

    dom.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    })
  }, [list])

  return (
    <div className={styles.box}>
      {/* 标题区域 */}
      <MyNavBar title="在线客服" />

      {/* 聊天内容区域 */}
      <div ref={domRef}>
        {/* 循环生成聊天的消息，
        在循环期间，根据 type 属性判断渲染左侧还是右侧的聊天消息 */}
        {list.map((item, index) =>
          item.type === 'AI' ? (
            <MsgLeft
              key={index}
              msg={item.message}
            />
          ) : (
            <MsgRight
              key={index}
              msg={item.message}
            />
          )
        )}
      </div>

      <div className={styles.footer}>
        <TextArea
          placeholder="请输入内容"
          value={userMsg}
          onChange={(val) => setUserMsg(val)}
          onEnterPress={send}
        />
        <Button
          color="primary"
          className={styles.btnSend}
          onClick={send}
          disabled={userMsg.trim().length === 0}
        >
          发送
        </Button>
      </div>
    </div>
  )
}

export default Chat
